<template>
    <view class="page-index">
        <view class="bar-area">
            <view class="fc-white fs30" @click="loginOut" :style="showQuitBtn?'':'visibility: hidden;'">退出</view>
            <view class="flex-row">
                <view class="fc-white fs35">病房巡视</view>
            </view>
            <view class="fc-white fs30">{{loginUser && loginUser.YHXM}}</view>
        </view>
        <view class="scan-tips-warning "> 请扫描病房二维码进行查房 </view>

        <!-- <view style="display: flex; position: absolute; top: 0rpx; left: 100rpx">
			<view>
				<view @click="scanTest(testId, 1)">扫描房号测试</view>
			</view>
			<view>
				<input
					type="text"
					v-model="testId"
					placeholder="请输入房号"
				/>
			</view>
            <div @click="showTourEnter = true">巡视结果录入</div>
		</view> -->

        <div class="time-select">
            <div class="time-select-btn">
                <u-button type="primary" plain text="前一天" @click="dateJumpTo('last')"></u-button>
            </div>
            <div class="time-select-date" @click="handleSelectDate()">
                <div>{{dateString}}</div>
                <u-icon class="ml-10" name="arrow-down-fill" color="gray" size="12"></u-icon>
                <!-- v-model="dateTime" -->
                <u-datetime-picker
                    :show="showDateSelector"
                    mode="date"
                    @confirm="dateConfirm"
                    @cancel="dateClose"
                ></u-datetime-picker>
                <!-- <u-calendar :show="showDateSelector" @confirm="dateConfirm" @close="dateClose" :defaultDate="dateString" :monthNum="12"></u-calendar> -->
            </div>
            <div class="time-select-btn">
                <u-button type="primary" plain text="后一天" @click="dateJumpTo('next')"></u-button>
            </div>
        </div>
        <scroll-view
                class="scroll-view"
                scroll-y="auto"
                :refresher-enabled="false"
                @refresherrefresh="onPullRefresh"
                @scrolltolower="onReachBottomDistance"
                :refresher-triggered="isRefresherTriggered"
        >
            <view>
                <view class="item-area" v-for="(item, index) in listData" :key="index">
                    <view class="item-body">
                        <view class="item-body-top">
                            <div class="item-body-top-area">
                                <div class="item-body-top-area-gl">急诊留观区</div>
                            </div>
                        </view>
                        <view class="item-body-bottom">
                            <view class="fs30 fb">{{item.brxm}}</view>
                            <view class="fs30 fc-sub ml-20">2024-1-1 10:10:10</view>
                        </view>
                        <div class="room-type">
                            <div class="room-type-content">
                                房间类型：正常
                            </div>
                        </div>
                    </view>
                </view>
                <u-empty :show="!(listData && listData.length >0)" marginTop="300"></u-empty>
            </view>
        </scroll-view>
        <u-modal :show="showTourEnter" title="巡视录入" showCancelButton @cancel="handleTourEnterClose()" @confirm="handleTourEnterConfirm()">
			<view class="tour-enter">
				<view class="tour-enter-form">
                    <div class="form-item">
                        <u-radio-group
                            v-model="radiovalue"
                            placement="column"
                        >
                            <u-radio
                                :customStyle="{marginBottom: '8px'}"
                                v-for="(item, index) in radiolist1"
                                :key="index"
                                :label="item.name"
                                :name="item.name"
                                @change="radioChange"
                            >
                            </u-radio>
                        </u-radio-group>
                    </div>
                </view>
			</view>
		</u-modal>
    </view>
</template>

<script>
    import {mapState} from 'vuex'
    import {logout} from "@/api/utils.js"
    import {
        getDateTimeString,
        getInspectType,
        getTimestamp,
        getDateString,
        showToast,
    } from "@/static/js/common.js"

    import "@/static/css/common.scss"

    export default {
        components: {},
        props: {
            showQuitBtn: {
                type: Boolean,
                default:function () {
                    return true
                }
            },
        },
        data() {
            return {
                showDateSelector:false,//日期选择器
                dateTime:null,//时间
                showTourEnter:false,//查房录入
                actionsSelect: null,//jzlx下拉选择
                isRefresherTriggered: false,
                listData: [
                    {
                        brch:'Q1232',//
                        yjfj:'1',//
                        yjfjName:'一级',//
                        brxm:'张三',//
                        brxbDm:'1',//
                        brnl:'18岁',//
                        mzhm:'BLH123123',//
                        brzs:'不舒服',//
                        isowner:'',//
                    }
                ],
                radiolist1: [
                    {
                        name: '正常',
                    },
                    {
                        name: '无人住房间',
                    },
                    {
                        name: '特殊护理病房',
                    },
                ],
                // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
                radiovalue: '正常',

                testId:'',//房号id
            }
        },
        watch: {
            actions(newval, oldVal) {
                if (newval && newval.length > 0) {
                    this.actionsSelect = newval[0];
                    // this.refresh();
                }
            },
        },
        computed: {
            ...mapState(['loginUser', 'area']),
            dateString(){
                return getDateString(this.dateTime);
            },
        },
        mounted() {
            this.dateTime = new Date();
        },
        methods: {
            dateJumpTo(type){
                if(type == 'last'){
                    this.dateTime = new Date(this.dateTime.getTime() - 24 * 60 * 60 * 1000);
                }else if(type == 'next'){
                    this.dateTime = new Date(this.dateTime.getTime() + 24 * 60 * 60 * 1000);
                }
            },
            dateClose(e){
                console.log(e);
                this.showDateSelector = false;
            },
            dateConfirm(e){
                console.log('日期：',e);
                this.dateTime = getDateTimeString(new Date(e.value));
                this.showDateSelector = false;

                console.log(this.dateTime);
            },
            handleSelectDate(){
                this.showDateSelector = true;
            },
            handleTourEnterClose(){
                this.showTourEnter = false;
            },
            handleTourEnterConfirm(){
                this.showTourEnter = false;
            },
            /**
             * 扫描测试
             * idMedord 医嘱组号
             */
            async scanTest(idMedordipex) {
                console.log('医嘱计划号：',idMedordipex);
                let patientRes = await this.getPatientByIdMedordipex(idMedordipex);//获取输液贴对应的病人信息
                this.nowPatient = patientRes.res.Data[0];
                this.nowIdMedordipex = idMedordipex;
                if(this.nowPatient.hisJzxh == this.nowIdVismed){//扫描到同一个病人 直接核对
                    console.log('同个病人，直接核对');
                    if(this.originListData.find(el=>el.idMedordipex == idMedordipex) != null){
                        this.handleScanCheck(this.originListData.find(el=>el.idMedordipex == idMedordipex).hihisAdvicePlanBeanList);//进行核对
                    }else{
                        showToast(-1,'未找到医嘱信息')
                    }
                    
                }else{//扫描到不同的病人  刷新医嘱列表 并核对
                    console.log('不同病人，先请求医嘱计划列表，再核对')
                    this.nowIdVismed = this.nowPatient.hisJzxh;
                    await this.getPlanListByIdVismed(this.nowPatient.hisJzxh);
                    if(this.originListData.find(el=>el.idMedordipex == idMedordipex) != null){
                        this.handleScanCheck(this.originListData.find(el=>el.idMedordipex == idMedordipex).hihisAdvicePlanBeanList);//进行核对
                    }else{
                        showToast(-1,'未找到医嘱信息')
                    }
                    
                }
            },
            loginOut() {
                logout();
            },
            onPullRefresh() {
                if (this.isRefresherTriggered) {
                    return;
                }
                this.isRefresherTriggered = true;
                this.refresh();
            },
            onReachBottomDistance() {
            },
            async refresh() {
                let params = {
                    orgId: this.loginUser?.JGID,
                    jzlx: this.actionsSelect.code,
                    lspb: 0,
                    yhdm: this.loginUser?.YHDM,
                }
                let result = await this.$commonAjax("auth/mobile/patient/get/getPatientList", params);
                this.isRefresherTriggered = false;
                if (result.res?.Data) {
                    this.listData = result.res.Data;
                }
            },
            // 关注
            async followClick(item) {
                let params = [{
                    jzlsh: item.jzlsh,
                    fzxh: item.fzxh,
                    gzhs: this.loginUser?.YHDM
                }]
                let result = await this.$commonAjax("auth/mobile/patient/post/SaveGroupByGzhs", params);
                if (result.res?.ReType == 0){
                    this.refresh();
                }
            },
            // 取消关注
            async unFlollowClick(item) {
                let params = [{
                    jlxh: item.wdgzJlxh,
                    gzhs: this.loginUser?.YHDM
                }]
                let result = await this.$commonAjax("auth/mobile/patient/post/deleteGroupByGzhs", params);
                if (result.res?.ReType == 0){
                    this.refresh();
                }
            }
        },
    }
</script>

<style lang="scss">
    .tour-enter{
        // height: 400rpx;
        .tour-enter-form{
            padding: 10px;
            // margin-top: 60rpx;
            .form-item{
                .u-radio-group--column{
                    // margin: 0px 100px;
                }
                .u-radio{
                    margin-bottom: 0px 30rpx !important;
                }
            }
        }
    }


    .bar-area {
        height: 100rpx;
        background-color: $bs-color-primary;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 30rpx;
        justify-content: space-between;
        padding: 0 30rpx;
    }
    .scroll-view {
        width: 100%;
        height: calc(100% - 300rpx);
        background-color: #f3f5f7;
        padding-bottom: 20rpx;
    }
    .item-area{
        margin: 20rpx 20rpx 0 20rpx;
        background-color: #ffff;
        border-radius: 10rpx;
        padding: 10rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .item-title {
            width: 150rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .item-line {
            width: 1rpx;
            background-color: #d6d7d9;
        }
        .item-operate {
            width: 150rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            ::v-deep {
                .u-button {
                    height: 30px;
                }
            }
        }
        .item-body {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0rpx 0rpx 0rpx 10rpx;
            .item-body-top {
                font-size: 25rpx;
                margin-bottom: 10rpx;
                padding-bottom: 10rpx;
                border-bottom: 1px dashed lightgray;
                .item-body-top-area{
                    font-size: 30rpx;
                    .item-body-top-area-gl{
                        color: #000000;
                        // font-weight: bold;
                    }
                }
            }
            .item-body-bottom {
                display: flex;
                flex-direction: row;
                padding-bottom: 10rpx;
                border-bottom: 1px dashed lightgray;
            }
        }
        .item-brch {
            font-size: 30rpx;
            color: #e06263;
            font-weight: bold;
        }
        .item-yjfj {
            font-size: 30rpx;
            margin-top: 5rpx;
            font-weight: bold;
            border-radius: 10rpx;
            width: 80rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .item-yjfj-one {
            color: #e06263;
            background-color: #feecec;
        }
        .item-yjfj-two {
            color: #ff9f36;
            background-color: #fff5ea;
        }
        .item-yjfj-three {
            color: #fecb37;
            background-color: #fef9ea;
        }
        .item-yjfj-four {
            color: #fefefe;
            background-color: #37c24b;
        }
    }

    .pop-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .pop-item-text {
            padding: 20rpx 0;
        }
    }
    .scan-tips-warning {
        text-align: center;
        background-color: #faefe4;
        font-size: 30rpx;
        color: #ff9a27;
        padding: 10rpx 0rpx;
    }
    .scan-tips-primary {
        text-align: center;
        background-color: #4089fe1f;
        font-size: 30rpx;
        color: #4088fe;
        padding: 10rpx 0rpx;
    }
    .item-check-status {
        font-size: 27rpx;
        margin-left: auto;
        display: flex;
        align-items: center;
        // color: #ffffff;
        .item-check-no {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8rpx 15rpx;
            border-radius: 8rpx;
            background-image: url("~@/static/warning_rect.svg");
            background-repeat: no-repeat;
            min-width: 80rpx;
        }
        .item-check-yes {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8rpx 15rpx;
            border-radius: 8rpx;
            // background-image: url("~@/static/success_rect.svg");
            background-repeat: no-repeat;
            min-width: 80rpx;
        }
        .item-check-status-text {
            // position: relative;
            // bottom: 4rpx;
            // right: 4rpx;
        }
    }
    .room-type{
        display: flex;
        position: relative;
        top: 8rpx;
        font-size: 30rpx;
        margin-bottom: 10rpx;
        .room-type-title{
            font-size: 28rpx;
        }
        .room-type-content{

        }
    }
    .time-select{
        display: flex;
        padding: 10rpx;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        .time-select-btn{
            
        }
        .time-select-date{
            display: flex;
            align-items: center;
        }
    }
    .submit-button {
        display: flex;
        position: absolute;
        bottom: 20rpx;
        width: 100%;
        justify-content: space-around;
        button {
            color: #262626;
            background-color: #ffffff;
            margin: 5rpx;
        }
        .primary-button {
            color: #ffffff;
            background-color: #4088fe;
        }
    }
</style>
